<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典BUG</title>
    <style>
        .wrapper{
            margin:100px 0 0 100px;
            width:100px;
            height:100px;
            background-color:black;
            /* border-top:1px solid red; */
            overflow:hidden;/*触发bfc*/
        }
        .content{
            margin-left:50px;
            margin-top:50px;
            width:50px;
            height:50px;
            background-color:blue;
        }
        p{
            line-height: 1.5rem;
        }
        .wrapper2{
            overflow: hidden;
        }
        .demo1,.demo2{
            margin:100px;
            background-color: lightcoral;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>    
    <h1>margin塌陷</h1>
    <p>父子关系的两个元素，在垂直方向的margin是重合的，margin取最大的值</p>
    <p>bfc</p>
    <p>block format context 块级格式上下文</p>
    <p>触发bfc会改变css的语法规则，只是改变一点，却解决了margin塌陷</p>
    <p>以下设置会触发bfc</p>
    <ol type="1">
        <li>position:absolute</li>
        <li>display:inline-block</li>
        <li>float:left/right</li>
        <li>overflow:hidden</li>
    </ol>
    <p>触发bfc会引发新的问题，所以如果要触发bfc，哪个没有新的影响就用哪个</p>
    <h1>margin合并</h1>
    <div class="wrapper2">
        <div class="demo1">1</div>
    </div>
    <div class="wrapper2">
        <div class="demo2">2</div>
    </div>
    
    <p>兄弟关系的两个元素，在垂直方向上的margin是重合的，margin取最大值</p>
    <ol>
        <li>不能为了解决bug加结构，所以在外面加一层是错误的</li>
        <li>选择不解决</li>
        <li></li>
    </ol>
    <p>盒子模型，层模型，浮动模型</p>
</body>
</html>